<template>
  <div>
    <el-row class="header">
      <el-col :span="4">
        <el-row type="flex" justify="space-between" class="price">
          <span>价格</span>
          <span>0-{{ price_hotel * 40 }}</span>
        </el-row>
        <el-slider :format-tooltip="formatTooltip" v-model="price_hotel">
        </el-slider>
      </el-col>
      <el-col :span="20" class="four">
        <el-row type="flex" class="ret">
          <el-col :span="5" class="pad">
            <span>住宿等级</span>
            <el-row type="flex" justify="space-between" class="pac">
              <el-dropdown>
                <span class="el-dropdown-link" style="padding-right: 70px">
                  {{ unlimited }}
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in hotelData.levels"
                    :key="index"
                  >
                    <el-checkbox-group
                      v-model="checkedCities"
                      @change="hotalTigger(item.id, 'hotellevel_in')"
                    >
                      <el-checkbox :label="item.name">{{
                        item.name
                      }}</el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i class="el-icon-arrow-down"></i>
            </el-row>
          </el-col>
          <el-col :span="5" class="pad">
            <span>住宿类型</span>
            <el-row type="flex" justify="space-between" class="pac">
              <el-dropdown>
                <span class="el-dropdown-link" style="padding-right: 70px">
                  {{ unlimited1 }}
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in hotelData.types"
                    :key="index"
                  >
                    <el-checkbox-group
                      v-model="checkedCities"
                      @change="hotalTigger(item.id, 'hoteltype_in')"
                    >
                      <el-checkbox :label="item.name">{{
                        item.name
                      }}</el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i class="el-icon-arrow-down"></i>
            </el-row>
          </el-col>
          <el-col :span="5" class="pad">
            <span>酒店设施</span>
            <el-row type="flex" justify="space-between" class="pac">
              <el-dropdown>
                <span class="el-dropdown-link" style="padding-right: 70px">
                  {{ unlimited2 }}
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in hotelData.assets"
                    :key="index"
                  >
                    <el-checkbox-group
                      v-model="checkedCities"
                      @change="hotalTigger(item.id, 'hotelasset_in')"
                    >
                      <el-checkbox :label="item.name">{{
                        item.name
                      }}</el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i class="el-icon-arrow-down"></i>
            </el-row>
          </el-col>
          <el-col :span="5" class="pad">
            <span>酒店品牌</span>
            <el-row type="flex" justify="space-between" class="pac">
              <el-dropdown size="medium" indeterminate:true>
                <span class="el-dropdown-link" style="padding-right: 70px">
                  {{ unlimited3 }}
                </span>
                <el-dropdown-menu slot="dropdown" class="el-num4">
                  <el-dropdown-item
                    v-for="(item, index) in hotelData.brands"
                    :key="index"
                  >
                    <el-checkbox-group
                      v-model="checkedCities"
                      @change="hotalTigger(item.id, 'hotelbrand_in')"
                    >
                      <el-checkbox :label="item.name">{{
                        item.name
                      }}</el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i class="el-icon-arrow-down"></i>
            </el-row>
          </el-col>
          <el-col :span="5" class="pad">
            <el-button type="primary" class="btn" @click="removeCity"
              >撤销条件</el-button
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["hotelData"],
  data() {
    return {
      price_hotel: 100,
      unlimited: "不限",
      unlimited1: "不限",
      unlimited2: "不限",
      unlimited3: "不限",
      checkedCities: [],
      //此对象是用户选中的筛选条件
      hotelObj: {
        price_lt: 4000, //酒店价格
        hotellevel_in: [], //酒店等级
        hoteltype_in: [], //住宿类型
        hotelasset_in: [], //酒店设施
        hotelbrand_in: [], //酒店品牌
      },
    };
  },
  methods: {
    //触发拉动条时触发
    formatTooltip(value) {
      this.hotelObj.price_lt = value * 40;
      return value * 40;
    },
    hotalTigger(id, arrName) {
      console.log(id, arrName);
      let condition = this.hotelObj[arrName];
      console.log(condition);
      if (condition.indexOf(id) != -1) {
        condition.splice(condition.indexOf(id), 1);
      } else {
        condition.push(id);
      }
      if (arrName == "hotellevel_in") {
        this.unlimited = `已选${condition.length}项`;
        this.hotelObj.hotellevel_in = condition;
      }
      if (arrName == "hoteltype_in") {
        this.unlimited1 = `已选${condition.length}项`;
        this.hotelObj.hoteltype_in = condition;
      }
      if (arrName == "hotelasset_in") {
        this.unlimited2 = `已选${condition.length}项`;
        this.hotelObj.hotelasset_in = condition;
      }
      if (arrName == "hotelbrand_in") {
        this.unlimited3 = `已选${condition.length}项`;
        this.hotelObj.hotelbrand_in = condition;
      }
      console.log(this.hotelObj);
      this.$emit("hotelInfo", this.hotelObj);
    },
    //撤销条件
    removeCity() {
      this.unlimited = "不限";
      this.unlimited1 = "不限";
      this.unlimited2 = "不限";
      this.unlimited3 = "不限";
      this.hotelObj = {
        price_lt: 4000, //酒店价格
        hotellevel_in: [], //酒店等级
        hoteltype_in: [], //住宿类型
        hotelasset_in: [], //酒店设施
        hotelbrand_in: [], //酒店品牌
      };
      location.replace(location.href);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  margin-top: 20px;
  width: 1000px;
  border: 1px solid #ccc;
  font-size: 14px;
  height: 75px;
  align-items: center;
  color: #666;
}
.price {
  padding: 5px 8px;
}

.four {
  .pad {
    padding: 5px 10px;
    border-left: 1px solid #ccc;
    .btn {
      margin-top: 13px;
      margin-left: 24px;
    }
  }
  .pac {
    display: block;
    // text-align: center
    padding-top: 5px;
    height: 38px;
    line-height: 38px;
  }
}
.el-slider {
  padding: 0 10px;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-radius: 10px;
  background-color: rgb(206, 203, 203);
  border-color: #cecbcb;
}
/deep/.el-checkbox__inner {
  border-radius: 10px;
  border-color: #ccc;
}
.el-num4 {
  height: 300px;
  overflow: auto;
}
</style>